<template>
	<view>
		<view v-if="!list_only">
			<view style="height: 450upx;position: relative;background-color: #ffffff;">
				<view style="height: 340upx;background-color: #05052B;"></view>
				<!-- banner -->
				<swiper autoplay="true" indicator-dots="true" circular="true" style="height: 352upx;position: absolute;width: 90%;top: 30upx;left: 5%;">
					<swiper-item v-for="(img,key) in data" :key="key">
						<image :src="img.resp_img" style="height: 352upx;width: 100%;" model="aspectFill"/>
					</swiper-item>
				</swiper>
				<view style="height: 40upx;position: absolute;width: 90%;bottom: 0;left: 5%;text-align: center;color: #05052B;font-size: 36upx;line-height: 40upx;font-weight: 550;">
					<!-- ~喜~悦~人~生~ -->
				</view>
			</view>
			<view style="height:10upx;background-color: #F2F2F2;">
			</view>
			<view class="uni-tab-bar" >
				<view class="uni-swiper-tab">
					<block v-for="(i,index) in category" :key="index">
							<view class="swiper-tab-list" :class="{'active': tabIndex == index}" @tap="toggleTab(index, i.id)">
								<view class="swiper-tab-line">
										<view>
											<image v-show="tabIndex == index" style="width: 60upx;height: 60upx;margin-top: 25upx;" :src="i.src1"></image>
											<image  v-show="tabIndex != index" style="width: 60upx;height: 60upx;margin-top: 25upx;" :src="i.src"></image>
											<view style="line-height: 0;">
												{{i.category_name}}
											</view>
										</view>
								</view>
							</view>
					</block>
				</view>
			</view>
			<swiper :current="tabIndex" @change="tabChange" class="addheight">
				<swiper-item v-for="(content,index) in contentList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }">
					<view v-for="(item,index) in content.data" :key="index" style="width: 100%;height: 220upx;display: inline-block;">
						<view style="width: 94%;height: 96%;margin: 2% 3%;border-bottom: 2upx solid #ccc;position: relative;" @click="jumpgoods" :data-id='item.id'>
							<view style="height: 180upx;position: relative;">
								<image :src="item.resp_img" style="width: 40%;height: 160upx;margin: 20upx 5% 0;"></image>
								<view style="position: absolute;right: 0;top: 0;height: 160upx;width: 50%;margin-top: 20upx;">
									<view style="color: #777;">
										{{item.article_title.substring(0,10)}}
									</view>
									<view style="color: #ccc;font-size: 24upx;">
										{{item.resp_desc}}
									</view>
								</view>
								<!-- <view class="delete" style="width: 40upx;height: 40upx;position: absolute;bottom: -20upx;right:30upx;">
									<image src="../../static/shanchu1.png" mode="" style="width: 40upx;height: 40upx;" @click="del"></image>
								</view> -->
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view v-if="list_only">
				
				<view v-for="(content,index) in contentList" :key="index" class="nav-item">
					<view v-for="(item,index) in content.data" :key="index" style="width: 100%;height: 220upx;display: inline-block;">
						<view style="width: 94%;height: 96%;margin: 2% 3%;border-bottom: 2upx solid #ccc;position: relative;" @click="jumpgoods" :data-id='item.id'>
							<view style="height: 180upx;position: relative;">
								<image :src="item.resp_img" style="width: 40%;height: 160upx;margin: 20upx 5% 0;"></image>
								<view style="position: absolute;right: 0;top: 0;height: 160upx;width: 50%;margin-top: 20upx;">
									<view style="color: #777;">
										{{item.article_title.substring(0,10)}}
									</view>
									<view style="color: #ccc;font-size: 24upx;">
										{{item.resp_desc}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>	
				
		</view>
		
	</view>
</template>

<script>
	export default {
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
			}
			if (this.pid_father == '' || this.pid_father == undefined || this.pid_father== null){
				uni.navigateTo({
					url: '../login/login'
				})
			}
			return {
				title: '新闻资讯',
				path: '/pages/media/media?pid=' + this.pid_father
			}
		},
		data() {
			return {
				category:[
					{
						src : '../../static/41.png',
						src1 : '../../static/23.png'
					},
					{
						src : '../../static/42.png',
						src1 : '../../static/21.png'
					},
					{
						src : '../../static/44.png',
						src1 : '../../static/22.png'
					},
					{
						src : '../../static/43.png',
						src1 : '../../static/20.png'
					}
				],
				data:[],
				openid:'',
				res:[],
				cateid: 0,
				tabCurrentIndex: 0,
				tabIndex: 0,	//选中标签栏的序列
				contentList: [{data:[]},{data:[]},{data:[]},{data:[]}
				],
				swiperHeight: 0,
				list_only: false,
				pid_father:'',
			};
		},
		onLoad:function(e){
			console.log(e)
			if(e.k,e.m){
				console.log(this.cateid)
				this.toggleTab(e.m, e.k)
			}else{
				let eee = e
				if ( e.pid ) {
					uni.setStorage({
						key: 'pid',
						data: e.pid
					})
				}
				// 页面显示是默认选中第一个
				this.tabCurrentIndex = 0;
				uni.getStorage({
					key: 'pid_father', // 个人中心页获取的分享id
					success: (res) => {
						this.pid_father = res.data
					}
				});
				uni.getStorage({
					key: 'openid',
					success: (res) => {
						this.openid = res.data
						if ( eee.id ) {
							this.list_only = true
							this.toggleTab(1, eee.id)
							return
						}
						this.setAjax()
						this.setAjax0()
					},
					fail: () => {
						uni.navigateTo({
							url: '../login/login'
						});
					}
				});
			}
			
		},
		methods:{
			setAjax(){
				uni.request({
					url: 'http://adkk.mygodmall.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=article.article_index&app=1',
					success: res => {
						console.log(res)
						this.data = res.data.article
						this.category = res.data.category
						// 设置默认显示的分栏
						this.cateid = res.data.category[0].id
						// this.setAjax0()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 列表内容
			setAjax0(){
				uni.request({
					url: 'http://adkk.mygodmall.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=article.list.getlist&app=1&page=1',
					method: 'GET',
					data: {'cateid':this.cateid},
					success: res => {
						console.log(res)
						this.contentList[this.tabIndex].data = res.data.articles
						if (this.list_only) {
							uni.setNavigationBarTitle({
							    title: res.data.cate_name
							});
						}
						
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 点击顶部模块index
			toggleTab(index,id){
				this.tabIndex = index
				this.cateid = id
				this.setAjax()
				this.setAjax0()
			},
			//滑动切换swiper
			tabChange(e){
				const tabIndex = e.detail.current
				this.tabIndex = tabIndex
			},
			del() {
				uni.showModal({
				title:'提示',
				content:'功能暂未开放',
				showCancel: false,
				confirmColor:"#DD524D",
					success() {
						return
					}
				})
			},
			jumpgoods(e) {
				uni.navigateTo({
					url: '../../pageA/essay/essay?essaysid=' + e.currentTarget.dataset.id
				});
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	.uni-tab-bar {
		background-color: #fff;
		// margin-top: 10upx;
		height: 160upx;
		.uni-swiper-tab{
			height: 160upx;
			.swiper-tab-list{
				height: 160upx;
				text-align: center;
				width: 25%;
				font-weight: 555;
				image {
					width: 72upx;
					height: 72upx;
					padding-top: 10upx;
				}
				.tab-name {
					
				}
			}
		}
	}
	// 选中状态
	.uni-tab-bar .active{
		color: #05052B;
		// border-bottom: 4upx solid #620729;
	}
	// 内部列表页样式
	.addheight {
		/* 调整每行列表的高度 */
		height: 800upx;
		background-color: #fff;
		// margin-top: 10upx;
		.nav-item {
			// display: flex;
			// flex-wrap: wrap;
			overflow: scroll;
		}
	}
	
	
</style>
